<template>
<div class="setting">
  <div class="line">
    <div class="menu-item">
      <router-link to="/main/usermanger">
        <div class="menu-icon">
          <span class="iconfont icon-yonghu"></span>
        </div>
      </router-link>
      <div class="menu-name">用户管理</div>
    </div>
    <div class="menu-item">
      <div class="menu-icon">
        <span class="iconfont icon-shiyongbangzhu"></span>
      </div>
      <div class="menu-name">使用手册</div>
    </div>
  </div>
  <div class="line">
    <div class="menu-item">
      <div class="menu-icon" @click="changePassword">
        <span class="font">***</span>
      </div>
      <div class="menu-name">修改密码</div>
    </div>
    <div class="menu-item"></div>
  </div>
  <div v-transfer-dom>
    <confirm v-model="reviseFlag2" :title="'密码重置'" @on-confirm="onConfirm">
      <div slot="default" class="revise2">
        <input type="text" placeholder="原6位数字密码" v-model="oldPassword">
        <br />
        <input type="text" placeholder="新6位数字密码" v-model="newPassword">
        <br />
        <input type="text" placeholder="重复新密码" v-model="repeatPassword">
      </div>
    </confirm>
  </div>
  <div v-transfer-dom>
    <confirm v-model="reviseFlag3" :title="'密码重置'" @on-confirm="onConfirm2">
      <div slot="default" class="revise2">
        <input type="text" placeholder="新6位数字密码" v-model="newPassword2">
        <br />
        <input type="text" placeholder="重复新密码" v-model="repeatPassword2">
      </div>
    </confirm>
  </div>
</div>
</template>
<script>
import "../iconfont/iconfont.css";
import { Confirm, TransferDomDirective as TransferDom } from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Confirm
  },
  mounted: function() {
    //首先判断 是否绑定
    this.$IsBind(
      () => {
        this.$vux.alert.show({
          title: "尚未绑定智能锁",
          content: "跳转到设备绑定界面",
          onHide: () => {
            this.$router.push({
              path: "/main/bind"
            });
          }
        });
      },
      function() {}
    );
  },
  data: function() {
    return {
      oldPassword: "",
      newPassword: "",
      newPassword2: "",
      repeatPassword: "",
      repeatPassword2: "",
      reviseFlag2: false,
      reviseFlag3: false
    };
  },
  methods: {
    changePassword() {
      this.getLatestOpenDoorEvent();
    },
    onConfirm: function() {
      //确定要 修改密码 了
      if (this.newPassword != this.repeatPassword) {
        this.$vux.toast.show({
          text: "两次密码不匹配"
        });
        return;
      }
      if (this.newPassword.length != 6) {
        this.$vux.toast.show({
          text: "密码须是6位数字"
        });
        return;
      }
      var obj = {
        oldPassword: this.oldPassword,
        newPassword: this.newPassword
      };
      this.$http.post("http://iot.malanco.com/changePassword", obj).then(
        response => {
          if (response.data.success == "true") {
            this.$vux.toast.show({
              text: "操作成功"
            });
          }
          this.clearData();
        },
        response => {
          var message = response.response.data.exceptionObj.message;
          this.$vux.toast.show({
            type: "warn",
            text: message
          });
          this.clearData();
        }
      );
    },
    onConfirm2: function() {
      //确定要 修改密码 了
      if (this.newPassword != this.repeatPassword) {
        this.$vux.toast.show({
          text: "两次密码不匹配"
        });
        return;
      }
      if (this.newPassword.length != 6) {
        this.$vux.toast.show({
          text: "密码须是6位数字"
        });
        return;
      }
      var obj = {
        newPassword: this.newPassword
      };
      this.$http.post("http://iot.malanco.com/resetPassword", obj).then(
        response => {
          if (response.data.success == "true") {
            this.$vux.toast.show({
              text: "操作成功"
            });
          }
          this.clearData();
        },
        response => {
          var message = response.response.data.exceptionObj.message;
          this.$vux.toast.show({
            type: "warn",
            text: message
          });
          this.clearData();
        }
      );
    },
    getLatestOpenDoorEvent: function() {
      var event = null;
      this.$http
        .get("http://iot.malanco.com/getLatestOpenDoorEvent")
        .then(response => {
          if (response.data.success == "true") {
            event = response.data.data;
            var now = new Date();
            //上次开门事件在五分钟之内，所以不需要输入重复密码
            if (event != null && now.getTime() - event.createTime < 300000) {
              //不需要输入原密码
              this.reviseFlag3 = true;
            } else {
              //需要输入原密码
              this.reviseFlag2 = true;
            }
          }
        });
    },
    clearData: function() {
      //清除数据
      this.newPassword = "";
      this.oldPassword = "";
      this.newPassword2 = "";
      this.repeatPassword = "";
      this.repeatPassword2 = "";
    }
  }
};
</script>
<style lang="less">
.setting {
  padding: 0 10px;
  .line {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    .menu-item {
      width: 70px;
      text-align: center;
      color: #8dcae2;
      .menu-icon {
        margin: 0 auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #8dcae2;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          font-size: 25px;
          color: #8dcae2;
        }
        .font {
          font-size: 20px;
          margin-top: 5px;
        }
      }
      .menu-name {
        font-size: 14px;
        width: 100%;
      }
    }
  }
}

.weui-dialog {
  .revise2 {
    // margin: 0 30px;
    input {
      margin-top: 10px;
      height: 25px;
      line-height: 25px;
      // width: 100%;
    }
    input:first-child {
      margin-top: 0;
    }
    input:last-child {
      margin-left: -4px;
    }
  }
}
</style>
